<template>
<!-- 党费缴纳 -->
  <div class="partyDues">
      <el-form>
          <el-form-item>
            <!-- <el-input clearable class="dues_name"  v-model="duesarr.name" placeholder="姓名"></el-input>
            <el-select v-model="duesarr.ispay" clearable placeholder="是否缴费">
                <el-option v-for="item in payList" :key="item.id" :value="item.value"></el-option>
            </el-select>
            <el-button @click="query">查询</el-button> -->
            <el-button type="primary" @click="initiate">发起缴费</el-button>
          </el-form-item>
      </el-form>
      <el-tabs v-model="duesTabs">
          <el-tab-pane class="jiaona" label="党费缴纳列表">
              <el-table :data="inquireList.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)" :key="duesTabs" height="450" border style="width: 100%">
                <el-table-column prop="createName" label="发起人">
                </el-table-column>
                <el-table-column prop="feeStartTime" label="开始时间">
                </el-table-column>
                <el-table-column prop="feeEndTime" label="截止时间">
                </el-table-column>
                <el-table-column prop="theme" label="缴费主题">
                </el-table-column>
                <el-table-column prop="cost" label="费用">
                </el-table-column>
                <el-table-column prop="createTime" label="发起时间">
                </el-table-column>
                <el-table-column prop="" label="操作">
                    <template slot-scope="scope">
                        <i class="el-icon-view information" @click="detailedDues(scope.row.id)"></i>
                    </template>
                </el-table-column>
              </el-table>
            <div class="paginationBlock">
                <el-pagination  @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1" :current-page="currentPage1" :page-size="pageSize1"
                layout="total,prev, pager, next,jumper" :total="total1">
                </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane class="qianfei" label="党费欠费列表">
              <el-table :data="arrearsList.slice((currentPage2-1)*pageSize2,currentPage2*pageSize2)" :key="duesTabs" height="450" border style="width: 100%">
                <el-table-column prop="name" label="姓名">
                </el-table-column>
                <!-- <el-table-column prop="gender" label="性别">
                </el-table-column> -->
                <!-- <el-table-column prop="gender" label="党员发展阶段">
                </el-table-column> -->
                <el-table-column prop="politics" label="党员发展阶段">
                </el-table-column>
                <el-table-column prop="partyOrganizationName" label="所在党组织">
                </el-table-column>
                <el-table-column prop="totalCost" label="欠费总费用">
                </el-table-column>
              </el-table>
            <div class="paginationBlock">
                <el-pagination  @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2" :current-page="currentPage2" :page-size="pageSize2"
                layout="total,prev, pager, next,jumper" :total="total2">
                </el-pagination>
            </div>
          </el-tab-pane>
      </el-tabs>
      <duesAdd ref="isduesadd" @membershipList="membershipList" @Arrears="Arrears" v-show="showduesadd"></duesAdd>
      <duesUserList ref="isduesUserList" v-show="showduesUserlist"></duesUserList>
  </div>
</template>

<script>
// import axios from "axios"
import duesUserList from "./dues_userlist.vue"
import duesAdd from "./duesAdd.vue"
export default {
    components:{duesAdd,duesUserList},
    data(){
        return{
            duesarr:{
                name:"",//姓名
                ispay:""//是否已缴费
            },
            payList:[
                {
                    id:"true",
                    value:"已缴费"
                },{
                    id:"false",
                    value:"未缴费"
                }
            ],
            showduesadd:false,//是否显示发起缴费弹框
            inquireList:[],//党费列表
            arrearsList:[],//欠费列表
            duesTabs:"",//tabs切换
            total1:0,
            currentPage1: 1,
            pageSize1: 6,
            pageSize2:6,
            currentPage2: 1,
            total2:0,
            showduesUserlist:false,//是否显示查看缴费人员名单弹框
        }
    },
    mounted(){
        this.membershipList()
        this.Arrears()
    },
    methods:{
        initiate(){//点击发起缴费按钮
            this.showduesadd = true
            this.$nextTick(() => {
                this.$refs.isduesadd.init()
            })
        },
        membershipList(){//获取党费缴纳列表
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"get",
                // url:"api/fee/getFeeList",
                url:`/fee/getFeeList?pageNum=${this.currentPage1}&pageSize=${this.pageSize1}`,
            }).then(res=>{
                // console.log(res)
                if(res.data.code != 20001){
                    return this.$message.error(res.data.msg)
                }
                this.inquireList = res.data.data.list
                // console.log(this.inquireList)
                this.total1 = res.data.data.totals
                this.inquireList.forEach(element=>{
                    element.totalCost = parseFloat(element.cost).toFixed(2)
                })
            })
        },
        Arrears(){//党员欠费列表
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"get",
                // url:"api/fee/getArrearageUserList",
                url:`/fee/getArrearageUserList?pageNum=${this.currentPage2}&pageSize=${this.pageSize2}`,
            }).then(res=>{
                // console.log(res)
                if(res.data.code != 20001){
                    return this.$message.error(res.data.msg)
                }
                this.arrearsList = res.data.data.list
                this.total2 = res.data.data.totals
                this.arrearsList.forEach(element=>{
                    element.totalCost = parseFloat(element.totalCost).toFixed(2)
                })
            })
        },
        handleCurrentChange1(val){//点击获取页码(党员缴纳列表)
            this.currentPage1 = val
            this.membershipList()
            this.currentPage1 = 1//调用接口后显示在第一页
        },
        handleSizeChange1(val) {//党员缴纳列表分页
            this.pageSize1 = val
            this.currentPage1 = 1
            // this.membershipList()
        },
        handleCurrentChange2(val){//点击获取页码(党员欠费列表)
            this.currentPage2 = val
            this.Arrears()
            this.currentPage2 = 1
        },
        handleSizeChange2(val) {//党员欠费列表
            this.pageSize2 = val
            this.currentPage2 = 1
            // this.Arrears()
        },
        detailedDues(id){//点击查看
            this.showduesUserlist = true
            this.$nextTick(()=>{
                this.$refs.isduesUserList.init(id)
            })
        },
        // query(){//点击查询按钮

        // }
    }
}
</script>

<style lang="scss">
    .partyDues{
        .el-form{
            .el-form-item{
                .dues_name{
                    width: 20vw;
                    margin-right: 1vw;
                }
                .el-select{
                    margin-right: 1vw;
                }
                .el-button{
                    margin-right: 1vw;
                }
            }
        }
        .jiaona,.qianfei{
            height: 67vh;
            // background: #fff;
            /* 设置分页的背景颜色为none */
            .el-pager li{
                background: none;
            }
            .btn-next,.btn-prev{
                background: none;
            }
        }
        .paginationBlock{
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        .el-pagination{
            text-align: center;
        }
        .information{
            cursor: pointer;
        }
        .information:hover{
            color: salmon;
        }
    }
    .has-gutter{
        th{
            text-align: center;
        }
    }
    .el-table__body{
        .el-table__row{
            td{
                text-align: center;
            }
        }
    }
</style>